<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="1024px"
      :before-close="handleClose"
    >
      <el-steps :active="1" finish-status="success" simple>
        <el-step title="上传文件"></el-step>
        <el-step title="导入数据"></el-step>
        <el-step title="导入完成"></el-step>
      </el-steps>
      <div style="font-size: 14px;color: #172b4d;margin-top: 18px">
        <div style="font-weight: 600">一、请按照数据模板的格式准备要导入的数据。</div>
        <div style="padding-left: 30px;margin: 8px 0 15px;font-size: 12px;line-height: 1.4;color: #6b778c">
          导入文件请勿超过1MB（约5000条数据）
        </div>
      </div>
      <div style="font-size: 14px;color: #172b4d">
        <div style="font-weight: 600">二、请选择数据重复时的处理方式。</div>
        <div style="padding-left: 30px;margin: 8px 0 15px;font-size: 12px;line-height: 1.4;color: #6b778c">
          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        </div>
      </div>
      <div style="font-size: 14px;color: #172b4d;margin-bottom: 18px">
        <div style="font-weight: 600">三、请选择需要导入的文件。</div>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-input v-model="fileList[0]" style="padding-left: 30px" disabled/>
        </el-col>
        <el-col :span="12">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            :file-list="fileList"
            :multiple="false"
            :show-file-list="false"
            :limit="1"
            :auto-upload="false"
            :on-exceed="handleExceed"
          >
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'FileUploadHigh',
  components: {},
  props: {},
  data() {
    return {
      dialogVisible: false,
      fileList: []
    }
  },
  // 在实例创建完成后被立即调用
  created() {

  },
  // 实例被挂在后调用
  mounted() {

  },
  // 方法
  methods: {
    open() {
      this.dialogVisible = true
    },
    handleClose() {

    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    submitUpload() {
      this.$refs.upload.submit()
    }
  }
}
</script>

<style scoped>

</style>
